<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>highlight.js developer</title>

  <link rel="stylesheet" href="../src/styles/default.css">

  <style>
    body { padding: 20px;
    font-family: sans-serif;
     }
    .editor textarea {
      display: block; width: 100%;
      height: 15em;
    }
    h3 {
      margin:0 0 0.5em;
      font-size:1.1em;
    }

    pre code,
    pre output {
      font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
      font-size: 13px;
      line-height: 1.15rem;
      display: block;
      padding:20px !important;
    }

    pre output {
      display: block; overflow: auto;
      padding: 0.5em;
      background: #F0F0F0;
    }

    .hljs-debug {
      color: red; font-weight: bold;
    }

    .visible-structure pre code span {
      display: inline-block;
      padding:2px;
      margin: 3px 0;
      border: 1px dashed #777;
      border-radius: 5px;
      white-space: pre;
    }

    .visible-structure pre code span:before {
      display: inline-block;
      content: attr(data-klass);
      font-size: 70%;
      background: #693;
      padding:1px 5px;
      border-radius: 3px;
      color:white;
      margin-right:0.5em;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <div class="editor">
    <h3>Code</h3>
    <div>
      <textarea>Put code here…</textarea>
      <p>
        <button id="update-highlighting">Update highlighting</button>
        <button id="show-structure">Show/hide structure</button>
        Language: <select class="languages"><option value="">(Auto)</option></select>
        Theme: <select class="theme">
          <option>1c-light.css</option>          
          <option>a11y-dark.css</option>
          <option>a11y-light.css</option>
          <option>agate.css</option>
          <option>an-old-hope.css</option>
          <option>androidstudio.css</option>
          <option>arduino-light.css</option>
          <option>arta.css</option>
          <option>ascetic.css</option>
          <option>atom-one-dark-reasonable.css</option>
          <option>atom-one-dark.css</option>
          <option>atom-one-light.css</option>
          <option>base16/3024.css</option>
          <option>base16/apathy.css</option>
          <option>base16/apprentice.css</option>
          <option>base16/ashes.css</option>
          <option>base16/atelier-cave-light.css</option>
          <option>base16/atelier-cave.css</option>
          <option>base16/atelier-dune-light.css</option>
          <option>base16/atelier-dune.css</option>
          <option>base16/atelier-estuary-light.css</option>
          <option>base16/atelier-estuary.css</option>
          <option>base16/atelier-forest-light.css</option>
          <option>base16/atelier-forest.css</option>
          <option>base16/atelier-heath-light.css</option>
          <option>base16/atelier-heath.css</option>
          <option>base16/atelier-lakeside-light.css</option>
          <option>base16/atelier-lakeside.css</option>
          <option>base16/atelier-plateau-light.css</option>
          <option>base16/atelier-plateau.css</option>
          <option>base16/atelier-savanna-light.css</option>
          <option>base16/atelier-savanna.css</option>
          <option>base16/atelier-seaside-light.css</option>
          <option>base16/atelier-seaside.css</option>
          <option>base16/atelier-sulphurpool-light.css</option>
          <option>base16/atelier-sulphurpool.css</option>
          <option>base16/atlas.css</option>
          <option>base16/bespin.css</option>
          <option>base16/black-metal-bathory.css</option>
          <option>base16/black-metal-burzum.css</option>
          <option>base16/black-metal-dark-funeral.css</option>
          <option>base16/black-metal-gorgoroth.css</option>
          <option>base16/black-metal-immortal.css</option>
          <option>base16/black-metal-khold.css</option>
          <option>base16/black-metal-marduk.css</option>
          <option>base16/black-metal-mayhem.css</option>
          <option>base16/black-metal-nile.css</option>
          <option>base16/black-metal-venom.css</option>
          <option>base16/black-metal.css</option>
          <option>base16/brewer.css</option>
          <option>base16/bright.css</option>
          <option>base16/brogrammer.css</option>
          <option>base16/brush-trees-dark.css</option>
          <option>base16/brush-trees.css</option>
          <option>base16/chalk.css</option>
          <option>base16/circus.css</option>
          <option>base16/classic-dark.css</option>
          <option>base16/classic-light.css</option>
          <option>base16/codeschool.css</option>
          <option>base16/cupcake.css</option>
          <option>base16/cupertino.css</option>
          <option>base16/danqing.css</option>
          <option>base16/darcula.css</option>
          <option>base16/dark-violet.css</option>
          <option>base16/darkmoss.css</option>
          <option>base16/darktooth.css</option>
          <option>base16/decaf.css</option>
          <option>base16/default-dark.css</option>
          <option>base16/default-light.css</option>
          <option>base16/dirtysea.css</option>
          <option>base16/dracula.css</option>
          <option>base16/edge-dark.css</option>
          <option>base16/edge-light.css</option>
          <option>base16/eighties.css</option>
          <option>base16/embers.css</option>
          <option>base16/equilibrium-dark.css</option>
          <option>base16/equilibrium-gray-dark.css</option>
          <option>base16/equilibrium-gray-light.css</option>
          <option>base16/equilibrium-light.css</option>
          <option>base16/espresso.css</option>
          <option>base16/eva-dim.css</option>
          <option>base16/eva.css</option>
          <option>base16/flat.css</option>
          <option>base16/framer.css</option>
          <option>base16/fruit-soda.css</option>
          <option>base16/gigavolt.css</option>
          <option>base16/github.css</option>
          <option>base16/google-dark.css</option>
          <option>base16/google-light.css</option>
          <option>base16/grayscale-dark.css</option>
          <option>base16/grayscale-light.css</option>
          <option>base16/green-screen.css</option>
          <option>base16/gruvbox-dark-hard.css</option>
          <option>base16/gruvbox-dark-medium.css</option>
          <option>base16/gruvbox-dark-pale.css</option>
          <option>base16/gruvbox-dark-soft.css</option>
          <option>base16/gruvbox-light-hard.css</option>
          <option>base16/gruvbox-light-medium.css</option>
          <option>base16/gruvbox-light-soft.css</option>
          <option>base16/hardcore.css</option>
          <option>base16/harmonic16-dark.css</option>
          <option>base16/harmonic16-light.css</option>
          <option>base16/heetch-dark.css</option>
          <option>base16/heetch-light.css</option>
          <option>base16/helios.css</option>
          <option>base16/hopscotch.css</option>
          <option>base16/horizon-dark.css</option>
          <option>base16/horizon-light.css</option>
          <option>base16/humanoid-dark.css</option>
          <option>base16/humanoid-light.css</option>
          <option>base16/ia-dark.css</option>
          <option>base16/ia-light.css</option>
          <option>base16/icy-dark.css</option>
          <option>base16/ir-black.css</option>
          <option>base16/isotope.css</option>
          <option>base16/kimber.css</option>
          <option>base16/london-tube.css</option>
          <option>base16/macintosh.css</option>
          <option>base16/marrakesh.css</option>
          <option>base16/materia.css</option>
          <option>base16/material-darker.css</option>
          <option>base16/material-lighter.css</option>
          <option>base16/material-palenight.css</option>
          <option>base16/material-vivid.css</option>
          <option>base16/material.css</option>
          <option>base16/mellow-purple.css</option>
          <option>base16/mexico-light.css</option>
          <option>base16/mocha.css</option>
          <option>base16/monokai.css</option>
          <option>base16/nebula.css</option>
          <option>base16/nord.css</option>
          <option>base16/nova.css</option>
          <option>base16/ocean.css</option>
          <option>base16/oceanicnext.css</option>
          <option>base16/one-light.css</option>
          <option>base16/onedark.css</option>
          <option>base16/outrun-dark.css</option>
          <option>base16/papercolor-dark.css</option>
          <option>base16/papercolor-light.css</option>
          <option>base16/paraiso.css</option>
          <option>base16/pasque.css</option>
          <option>base16/phd.css</option>
          <option>base16/pico.css</option>
          <option>base16/pop.css</option>
          <option>base16/porple.css</option>
          <option>base16/qualia.css</option>
          <option>base16/railscasts.css</option>
          <option>base16/rebecca.css</option>
          <option>base16/ros-pine-dawn.css</option>
          <option>base16/ros-pine-moon.css</option>
          <option>base16/ros-pine.css</option>
          <option>base16/sagelight.css</option>
          <option>base16/sandcastle.css</option>
          <option>base16/seti-ui.css</option>
          <option>base16/shapeshifter.css</option>
          <option>base16/silk-dark.css</option>
          <option>base16/silk-light.css</option>
          <option>base16/snazzy.css</option>
          <option>base16/solar-flare-light.css</option>
          <option>base16/solar-flare.css</option>
          <option>base16/solarized-dark.css</option>
          <option>base16/solarized-light.css</option>
          <option>base16/spacemacs.css</option>
          <option>base16/summercamp.css</option>
          <option>base16/summerfruit-dark.css</option>
          <option>base16/summerfruit-light.css</option>
          <option>base16/synth-midnight-terminal-dark.css</option>
          <option>base16/synth-midnight-terminal-light.css</option>
          <option>base16/tango.css</option>
          <option>base16/tender.css</option>
          <option>base16/tomorrow-night.css</option>
          <option>base16/tomorrow.css</option>
          <option>base16/twilight.css</option>
          <option>base16/unikitty-dark.css</option>
          <option>base16/unikitty-light.css</option>
          <option>base16/vulcan.css</option>
          <option>base16/windows-10-light.css</option>
          <option>base16/windows-10.css</option>
          <option>base16/windows-95-light.css</option>
          <option>base16/windows-95.css</option>
          <option>base16/windows-high-contrast-light.css</option>
          <option>base16/windows-high-contrast.css</option>
          <option>base16/windows-nt-light.css</option>
          <option>base16/windows-nt.css</option>
          <option>base16/woodland.css</option>
          <option>base16/xcode-dusk.css</option>
          <option>base16/zenburn.css</option>
          <option>brown-paper.css</option>
          <option>brown-papersq.png</option>
          <option>codepen-embed.css</option>
          <option>color-brewer.css</option>
          <option>dark.css</option>
          <option>default.css</option>
          <option>devibeans.css</option>
          <option>docco.css</option>
          <option>far.css</option>
          <option>felipec.css</option>
          <option>foundation.css</option>
          <option>github-dark-dimmed.css</option>
          <option>github-dark.css</option>
          <option>github-gist.css</option>
          <option>github.css</option>
          <option>gml.css</option>
          <option>googlecode.css</option>
          <option>gradient-dark.css</option>
          <option>gradient-light.css</option>
          <option>grayscale.css</option>
          <option>hybrid.css</option>
          <option>idea.css</option>
          <option>intellij-light.css</option>
          <option>ir-black.css</option>
          <option>isbl-editor-dark.css</option>
          <option>isbl-editor-light.css</option>
          <option>kimbie-dark.css</option>
          <option>kimbie-light.css</option>
          <option>lightfair.css</option>
          <option>lioshi.css</option>
          <option>magula.css</option>
          <option>mono-blue.css</option>
          <option>monokai-sublime.css</option>
          <option>monokai.css</option>
          <option>night-owl.css</option>
          <option>nnfx-dark.css</option>
          <option>nnfx-light.css</option>
          <option>nord.css</option>
          <option>obsidian.css</option>
          <option>panda-syntax-dark.css</option>
          <option>panda-syntax-light.css</option>
          <option>paraiso-dark.css</option>
          <option>paraiso-light.css</option>
          <option>pojoaque.css</option>
          <option>purebasic.css</option>
          <option>qtcreator-dark.css</option>
          <option>qtcreator-light.css</option>
          <option>rainbow.css</option>
          <option>routeros.css</option>
          <option>school-book.css</option>
          <option>shades-of-purple.css</option>
          <option>srcery.css</option>
          <option>stackoverflow-dark.css</option>
          <option>stackoverflow-light.css</option>
          <option>sunburst.css</option>
          <option>tokyo-night-dark.css</option>
          <option>tokyo-night-light.css</option>
          <option>tomorrow-night-blue.css</option>
          <option>tomorrow-night-bright.css</option>
          <option>vs.css</option>
          <option>vs2015.css</option>
          <option>xcode.css</option>
          <option>xt256.css</option>
        </select>
      </p>
    </div>
    <div>
      <h3>Rendered in <span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</h3>
      <pre><code class="hljs">...</code></pre>
    </div>
    <div>
      <h3>Markup</h3>
      <pre><output>...</output></pre>
    </div>
  </div>

  <script src="../build/highlight.js"></script>
  <script src="vendor/jquery-2.1.1.min.js"></script>
  <script>
    hljs.debugMode();

    function saveSettings() {
      var editor = $("body .editor");
      var language = editor.find('.languages').val();
      var code = editor.find('textarea').val();
      var theme = $(".theme").val();
      SourceStore.save({
        language, code, theme
      })
    }

    $(document).ready(function() {
      var select = $('.languages');
      hljs.listLanguages().forEach(function(l) {
        select.append('<option>' + l + '</option>');
      });

      $(".theme").change(function(e) {
        var css = e.target.value;
        var link = $("link[rel=stylesheet]")[0]
        link.href = `../src/styles/${css}`
        localStorage.setItem(key_THEME, css);
      })

      function update() {
        var editor = $(this).parents('.editor');
        var language = editor.find('.languages').val();
        var source = editor.find('textarea').val();
        var start_time = +new Date();
        var result = hljs.getLanguage(language) ? hljs.highlight(source, { language, ignoreIllegals: true}) : hljs.highlightAuto(source);
        var rendering_time = +new Date() - start_time;
        editor.find('.hljs').html(result.value);
        $(".hljs span").each((_,el) => {
          $(el).attr("data-klass", el.className.replace("hljs-",""))
        })
        var rendering_stats = result.language + ': relevance ' + (result.relevance );
        if (result.secondBest) {
            rendering_stats += ', ' + result.secondBest.language + ': ' + (result.secondBest.relevance || result.secondBest.r);
        }
        editor.find('.rendering_stats').text(rendering_stats);
        editor.find('.rendering_time').text(rendering_time);
        editor.find('output').text(result.value);
        saveSettings();
      
      };

      $('.editor button#update-highlighting').click(update);
      $(".languages").change(update);

      $('.editor button#show-structure').click(function(e) {
        var editor = $(this).parents('.editor');
        editor.toggleClass('visible-structure');

        localStorage.setItem(key_STRUCTURE, editor.hasClass('visible-structure'));
      });
    });

    var SourceStore;
    var key_CODE = 'hljs-source';
    var key_LANGUAGE = 'hljs-lang';
    var key_THEME = 'hljs-theme';
    var key_STRUCTURE = 'hljs-structure';
    (function(){
      SourceStore = {
        save: function({code, language, theme}){
          localStorage.setItem(key_CODE, code);
          localStorage.setItem(key_LANGUAGE, language);
          localStorage.setItem(key_THEME, theme);
        },
        resolve: function(){
          let code = localStorage.getItem(key_CODE)
          if (!code) return null;

          return {
            code,
            language: localStorage.getItem(key_LANGUAGE),
            theme: localStorage.getItem(key_THEME) || 'default.css',
          };
        }
      };
      $(function(){
        var data = SourceStore.resolve();
        if (!data) return;
        $('.editor textarea').val(data.code);
        $('.editor .languages').val(data.language);
        $('.theme').val(data.theme);
        $('.editor button').first().click();

        if (localStorage.getItem(key_STRUCTURE) === "true") {
          var editor = $('body .editor');
          editor.toggleClass('visible-structure');
        }

        var link = $("link[rel=stylesheet]")[0]
        link.href = `../src/styles/${data.theme}`
      });
    }());
  </script>
</body>
</html>
